<!-- 登陆注册页面 -->
<template>
    <div class="body_">
        <div class="center-u-v">
            <el-col :span="8" :offset="0" class="left-column">
                <div class="h-flexer list-item">
                    <img class="little-logo" src="https://static.zhipin.com/v2/web/geek/images/logo.png">
                    <div class="v-flexer ft left-5px">
                        <span>找工作</span>
                        <span>上BOS直聘直接谈</span>
                    </div>
                </div>
                <div class="h-flexer list-item2 " v-if="role == 'HR'">
                    <div class="logo l01"></div>
                    <div class="v-flexer ltf left-5px">
                        <span>招聘效果好</span>
                        <span class="gft">与职场牛人直接开聊</span>
                    </div>
                </div>
                <div class="h-flexer list-item2 " v-if="role == 'HR'">
                    <div class="logo l02"></div>
                    <div class="v-flexer ltf  left-5px">
                        <span>更多在线牛人</span>
                        <span class="gft">入职速度快</span>
                    </div>
                </div>
                <div class="h-flexer list-item2 " v-if="role == 'HR'">
                    <div class="logo l03"></div>
                    <div class="v-flexer ltf left-5px">
                        <span>人才匹配度高</span>
                        <span class="gft">获取更精准的牛人</span>
                    </div>
                </div>

                <div class="h-flexer list-item2 " v-if="role == 'EMP'">
                    <div class="logo l04"></div>
                    <div class="v-flexer ltf left-5px">
                        <span>沟通</span>
                        <span class="gft">在线职位及时沟通</span>
                    </div>
                </div>
                <div class="h-flexer list-item2 " v-if="role == 'EMP'">
                    <div class="logo l05"></div>
                    <div class="v-flexer ltf left-5px">
                        <span>任性选</span>
                        <span class="gft">各大行业职位任性选</span>
                    </div>
                </div>

            </el-col>
            <el-col :span="16" :offset="0" class="right-column">

                <div class="icon-wrapper" id="icon-switch">
                    <div class="icon"></div>
                    <div class="tip">APP扫码登录</div>
                </div>

                <div id="phone-login">
                    <div class="title">验证码登录/注册</div>
                    <div class="switcher">
                        <div :class="[role == 'EMP' ? 'role_active' : 'role_inactive']" @click="switchRole('EMP')">我要找工作
                        </div>
                        <div :class="[role == 'HR' ? 'role_active' : 'role_inactive']" @click="switchRole('HR')">我要招聘</div>
                    </div>
                    <div class="phone-wrapper">
                        <div class="region-code">+86</div>
                        <input class="phone-enter" placeholder="手机号" type="tel" v-model="phone">
                    </div>
                    <div class="number-wrapper">
                        <input class="code-enter" type="text" v-model="verify_code">
                        <div class="send-code-btn" id="send-code" :style="[wait_seconds==60?'cursor:pointer':'cursor:not_allowed']" @click="send_code">{{ timer_tip }}</div>
                    </div>
                    <div id="tip">求职者Web端暂未实现！请用手机端登陆</div>
                    <div class="reg-login-btn" id="cfm-btn" @click="confirm_login">登录/注册</div>
                    <div class="warn"></div>
                </div>


            </el-col>

        </div>
    </div>
</template>

<script>

export default {
    name: "login_reg_page",
    data() {
        return {
            phone: '',
            verify_code: '',
            wait_seconds: 60,
            role: 'EMP',
            timer_tip: '发送验证码'
        }
    },
    methods: {
        switchRole(role_) {
            console.log(role_)
            this.role = role_
        },
        setTimer() {
            let this_ = this
            if (this.wait_seconds === 0) {
                this.wait_seconds = 60;
                this.timer_tip = '发送验证码'
            } else {
                this.wait_seconds--;
                setTimeout(function () {
                    this_.setTimer()
                }, 1000);
                this.timer_tip = `${this.wait_seconds}s 后重发`
            }
        },
        send_code() {
            loginPageApis.sendCode(this.phone, this.role).then(resp => {
                console.log(resp.data)
                if (resp.data.code == 200) {
                    this.$message.success("发送验证码成功！")
                    this.setTimer()
                } else if (resp.data.code == 401) {
                    this.$message.warning("发送失败，已经发送过了，请等待！")
                }
                else if (resp.data.code == 500) {
                    this.$message.error("发送验证码失败！服务器错误！")
                }
            }).catch(e => {
                this.$message.error("发送验证码失败！未知错误！")
            })

        },
        confirm_login() {
            loginPageApis.confirmLogin(this.phone, this.verify_code, this.role).then(resp => {
                switch (resp.data.code) {
                    case 200:
                        console.log("token是" + resp.data)
                        // 设置全局状态
                        this.$store.commit('set_token', resp.data.data)
                        // 这里不是函数。。
                        console.log(this.$store.getters.get_token)
                        this.$router.push({ path: '/hr_panel' })
                        break
                    case 600:
                        this.$message.error("登陆失败！")
                }
            })
        }

    },
    mounted() {
        this.role = 'HR'
    },

}
</script>

<style>
.center-u-v {
    height: 550px;
    width: 690px;
    border-radius: 20px;
    background: #eee;
    margin: 50px auto;
}

.body_ {
    height: 100%;
    width: 100%;
    display: block;
    padding-top: 50px;

    background: #00c1c1 url(https://img.bosszhipin.com/static/file/2022/zlqc2m9fao1667185843533.png) bottom/100% auto no-repeat
}


.left-column {
    background: linear-gradient(214deg, #dffbff, #faf6f3);
    border-radius: 20px 0 0 20px;
    height: 550px;
}

.right-column {
    background: white;
    border-radius: 0 20px 20px 0;
    height: 550px;
}

.title {
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    margin-top: 30px;
}

.switcher {
    width: 300px;
    background: #eeeeee;
    margin: 20px auto;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    height: 40px;
    justify-content: center;
}

.switcher * {
    margin: 2px;
    width: 140px;
    height: 35px;
    background: #eeeeee;
    line-height: 35px;
    text-align: center;
    transition-property: background-color;
    transition-duration: 0.5s;
}

.role_active {
    background: white;
    color: #00c1c1
}

.role_inactive {
    background-color: #eee;
    color: black;
}

#emp-login {
    background: white;
    color: #00c1c1;
}

#emp-login {
    border-radius: 10px 0 0 10px;
}

#hr-login {
    border-radius: 0 10px 10px 0;
}

.phone-wrapper,
.number-wrapper {
    height: 40px;
    width: 300px;
    border: 1px solid #01a1a7;
    border-radius: 5px;
    display: flex;
}

.phone-wrapper {
    margin: 25px auto;
}

.number-wrapper {
    margin: 20px auto;
}

.region-code {
    height: 40px;
    text-align: center;
    line-height: 40px;
    padding-left: 20px;
}

.phone-enter {
    height: 38px;
    width: 70%;
    outline: none;
    border: none;
    padding-left: 40px;
}

.code-enter {
    height: 38px;
    width: 65%;
    border: none;
    outline: none;
    padding-left: 20px;
}

.send-code-btn {
    line-height: 38px;
    text-align: center;
    color: #00c1c1;
}

.reg-login-btn {
    background-color: #00c1c1;
    color: white;
    width: 300px;
    height: 38px;
    border-radius: 5px;
    text-align: center;
    margin: 10px auto;
    line-height: 38px;
}

.little-logo {
    width: 40px;
    height: 40px;
}

.ft {
    font-size: 8px;
    color: #00c1c1;
}

.v-flexer {
    display: flex;
    flex-direction: column;
}

.h-flexer {
    flex-direction: row;
    display: flex;
}

.list-item {
    margin: 50px 30px;
}

.list-item2 {
    margin: 30px 30px;
}

.left-5px {
    margin-left: 5px;
    margin-top: 2px;
}

.logo {
    background: url(https://img.bosszhipin.com/static/file/2022/5j2r4fg3uy1666342531695.png) no-repeat;
    background-size: 40px auto;
    width: 40px;
    height: 40px;
}

.l01 {
    background-position: 0 -84px;
}

.l02 {
    background-position: 0 -126px;
}

.l03 {
    background-position: 0 -168px;
}

.l04 {
    background-position: 0 0;
}

.l05 {
    background-position: 0 -42px;
}

.ltf {
    font-size: 8px;
}

.gft {
    color: gray;
}

.for-hr {
    display: none;
}

.icon {
    background: url(https://img.bosszhipin.com/static/file/2022/4dwjcdpfje1667186848239.png) 0 0/40px auto no-repeat;
    width: 40px;
    height: 40px;
}

.tip {
    position: relative;
    left: 45px;
    top: -30px;
    font-size: 5px;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 2px 2px 10px 2px lightgray;
}

.warn {
    font-size: 6px;
    margin: 5px auto;
    color: red;
    width: 100px;
    height: 10px;
    display: none;
}

#tip {
    margin: 5px auto;
    display: none;
    text-align: center;
}
</style>